<template>
  <div>
    <van-submit-bar style="margin-bottom: 50px" :price="888" button-text="提交订单" @submit="onSubmit">
      <a @click="showBottom = true">查看</a>
      <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '50%' }">
        <div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> 订单内容</van-divider>
          <!--TODO 一条订单信息-->
          <van-row style="margin-left: 30px">
            <van-col>
              <van-image width="100" height="100" :src="shopCartInfo.productImg" />
            </van-col>
            <van-col style="margin-left: 20px">
              <van-row :gutter="20">
                <div>{{ shopCartInfo.productDescription }}</div>
              </van-row>
              <van-row style="margin-top: 30px" justify="space-between">
                <van-col>
                  <p>价格：{{ parseFloat((shopCartInfo.price * shopCartInfo.number).toFixed(10)) }}</p>
                </van-col>
                <van-col style="margin: 10px">
                  <van-stepper v-model="shopCartInfo.number" />
                </van-col>
                <van-col style="margin: 10px">
                  <van-button size='small' @click='handleCancel'>取消</van-button>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-popup>
    </van-submit-bar>
  </div>
</template>

<script setup>
import { showSuccessToast } from 'vant'
import { computed, ref } from 'vue'

let showBottom = ref(false)
const onSubmit = () => {
  showSuccessToast('购买成功')
}

const handleCancel=()=>{
  showSuccessToast('已取消')
}

// 模拟订单信息
let shopCartInfo = ref({
  productImg: 'http://47.98.184.192:8085/LightPicture/2023/05/110cf4bd6f64c830.jpg',
  productDescription: '这是一段描述性的文字',
  price: '18.88',
  number: 1,
})
</script>

<style scoped></style>
